<template>
    <div class="goodsindex">
        <!-- 搜索条件 -->
        <el-row :gutter="20" class="goodsindex-queryInfo">
            <!-- <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
                <el-input class="goodsindex-queryInfo-li" v-model="queryInfo.name" clearable size="small" placeholder="请输入用户名称"></el-input>
            </el-col>
            <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
                 <el-select class="goodsindex-queryInfo-li" v-model="queryInfo.type" size="small" clearable placeholder="请选择用户分类">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
                <el-button type="primary" class="goodsindex-queryInfo-li" size="small" >搜索</el-button>
            </el-col>
            <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
                <el-button type="primary" class="goodsindex-queryInfo-li" size="small" @click="handleEdit()">添加</el-button>
            </el-col> -->
            <!-- <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
                <el-button size="small" type="danger" class="goodsindex-queryInfo-li" @click="handleDelete()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
            </el-col> -->
        </el-row>
        <!-- 检索结果 -->
        <el-row :gutter="20" class="goodsindex-list">
            <el-col :span="24">
                <el-table
                    :data="userList"
                    border
                    size='small'
					@selection-change="selectionChangeHandle"
                    style="width: 100%">
                    <el-table-column
                    type="index"
					header-align="center"
					align="center"
                    label="序"
                    width="50">
                    </el-table-column>
					<el-table-column
					  type="selection"
					  header-align="center"
					  align="center"
					  width="50">
					</el-table-column>
                    <el-table-column
                    prop="username"
					header-align="center"
					align="center"
                    label="用户名"
                    min-width="100">
                    </el-table-column>
                    <el-table-column
                    prop="time"
					header-align="center"
					align="center"
                    label="时间"
                    min-width="80">
                    </el-table-column>
                    <el-table-column
                    prop="operation"
					header-align="center"
					align="center"
                    label="操作"
                    min-width="100">
                    </el-table-column>
                    <el-table-column
                    prop="method"
					header-align="center"
					align="center"
                    label="参数"
                    min-width="180">
                    </el-table-column>
                    <el-table-column
                    prop="ip"
					header-align="center"
					align="center"
                    label="ip"
                    min-width="100">
                    </el-table-column>
                    <el-table-column
                    prop="createDate"
					header-align="center"
					align="center"
                    label="创建时间"
                     min-width="100">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <!-- 分页 -->
        <el-row :gutter="20" class="goodsindex-list">
            <el-col :span="24" class="goodsindex-page-box">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageIndex"
                    :page-sizes="[1,10, 20, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalPage">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data(){
        return {
            queryInfo:{
                name: '',
                type: ''
            },
			userList: [],
			dataListSelections:[],//批量删除
			pageIndex: 1,
			pageSize: 10,
			totalPage: 0,
            options: [
                {
                    label: 1,
                    value: '管理员'
                },
                {
                    label: 2,
                    value: '普通用户'
                }
            ]
        }
    },
	created(){
		this.getUserlist();
	},
   methods: {
	   //获取用户列表
	   getUserlist(){
		   this.Sevice({
			   url:'sys/log/list',
			   method:'get',
			   params:{
				   'currentPage': this.pageIndex,
				   'pageSize': this.pageSize
			   }
		   }).then(res=>{
			   console.log(res)
			   if(res&&res.code==200){
				   this.userList=res.page.list;
				   this.totalPage=res.page.totalCount;
			   }else{
				   this.userList=[];
				   this.totalPage=0;
			   }
		   }).catch(err=>{
			   console.log(err);
		   })
	   },
		// 多选
		selectionChangeHandle (val) {
		  this.dataListSelections = val
		},
		 // 分页
		 handleSizeChange(val){
			 this.pageSize=val;
			 this.getUserlist();
		 },
		 handleCurrentChange(val){
			this.pageIndex=val;
			this.getUserlist();
		 }
		 
    }
}
</script>

<style scoped>
.goodsindex{
    width: 100%;
    min-height: 100%;
    padding: 15px;
    box-sizing: border-box;
}
/* 搜索 */
.goodsindex-queryInfo{
    margin-bottom: 10px;
}
.goodsindex-queryInfo-li{
    width: 100%;
    height: auto;
	margin: 5px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* 列表 */
.goodsindex-list{
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
/* 分页 */
.goodsindex-page-box{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
}
</style>